import React from 'react';
import {Button, Input, List, Typography} from "antd";
import store from '../store'
import {addList, changeValue, initList} from "../store/action";
import { connect } from 'react-redux';

class TodoList extends React.Component {
    constructor(props) {
        super(props);
    //     this.state = {
    //         // 获取state
    //         ...store.getState()
    //     };
    //     // 监听器 监听state的变化
    //     this.unsubscribe = store.subscribe(() => {
    //         this.setState({
    //             ...store.getState()
    //         })
    //     })
    }
    // 生命周期函数 发送http请求
    componentDidMount(){
        console.log(this.props);
        debugger
       store.dispatch(initList())
    }

    handleChange(e) {
        // 在这里我们要触发redux内容的修改 更新state
        store.dispatch(changeValue(e.target.value))
    }

    handleSubmit() {
        store.dispatch(addList(this.props.value));
    }

    render() {
        return (
            <div style={{width: '400px', padding: '10px'}}>
                <Input value={this.props.value} onChange={this.handleChange.bind(this)} placeholder="请输入代办事项"
                       style={{width: '300px'}} />
                <Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
                <List
                    style={{width: '300px', marginTop: '10px'}}
                    bordered
                    dataSource={this.props.list}
                    renderItem={item => (
                        <List.Item>
                            <Typography.Text mark>[代办]</Typography.Text> {item.title}
                        </List.Item>
                    )}
                />
            </div>
        );
    }

    // componentWillUnmount() {
    //     this.unsubscribe()
    // }
}
const mapStateToProps = (state) =>{
    return {
        list :state.list,
        value:state.value
    }
}

export default connect(mapStateToProps )(TodoList);